<template>
	<div class="login_bg">
		<div class="login-css">
			<div class="header">
				<div class="login-title">
					<p class="title01">以调适为核心建筑数字能源管理</p>
					<p class="title02">
						Building Commissioning Based Digital Building Energy
						Management
					</p>
				</div>

				<div class="right">
					<div>
						<el-dropdown
							popper-class="langPopover"
							trigger="click"
							@command="langHandleCommand"
						>
							<span class="el-dropdown-link lang">
								{{ language }}
								<el-icon class="el-icon--right"
									><arrow-down
								/></el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu class="languageDropdown">
									<el-dropdown-item command="zh-cn"
										>中文</el-dropdown-item
									>
									<el-dropdown-item command="en"
										>英文</el-dropdown-item
									>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>

					<div>
						<el-dropdown
							popper-class="resourcesPopover"
							trigger="click"
							@command="resources"
						>
							<span class="el-dropdown-link resources">
								资源
								<el-icon class="el-icon--right"
									><arrow-down
								/></el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu class="resourcesDropdown">
									<el-dropdown-item command="jj"
										>系统简介</el-dropdown-item
									>
									<el-dropdown-item command="sm"
										>使用说明</el-dropdown-item
									>
									<el-dropdown-item command="jd"
										>调适潜力智慧诊断</el-dropdown-item
									>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</div>
			</div>

			<div class="login-css-title">
				<div>
					<span class="maxOAO">OAO</span>
				</div>
				<div class="title-top">
					<p class="login-title-01">线上+线下智慧陪伴式运维</p>
					<p class="login-title-02">
						Online and Offline Accompanying Smart Operation
					</p>
				</div>
			</div>

			<div class="login_main">
				<div v-if="isWjmm === false" class="login-form">
					<div class="jiaohao" @click="login()">
						<Jiaohao></Jiaohao>
					</div>
					<el-form
						ref="ruleForm"
						:model="ruleForm"
						:rules="rules"
						class="demo-ruleForm"
						status-icon
					>
						<el-form-item prop="pass">
							<el-input
								v-model="ruleForm.user"
								class="input01"
								placeholder="请输入用户名"
							>
								<template #prefix>
									<span class="iconfont icon-yonghu"></span>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="checkPass">
							<el-input
								v-model="ruleForm.password"
								class="password-css"
								placeholder="请输入密码"
								type="password"
							>
								<template #prefix>
									<span class="iconfont icon-mima"></span>
								</template>
								<template #append class="jizhumima">
									<el-checkbox v-model="checked">{{
										$t("login.password")
									}}</el-checkbox>
								</template>
								>
							</el-input>
						</el-form-item>
						<el-form-item prop="age">
							<el-input
								v-model="ruleForm.age"
								:placeholder="$t('login.verifyCode')"
								class="verification"
							>
								<template #prefix>
									<span class="iconfont icon-dunpai"></span>
								</template>
								<template #append>
									<VerificationCode
										v-model:changeCode="identifyCode"
									></VerificationCode>
								</template>
							</el-input>
						</el-form-item>
						<div class="wjmima">
							<span @click="wjmm()"
								>{{ $t("login.forget") }}？</span
							>
						</div>
					</el-form>
				</div>

				<div v-else-if="isWjmm === true" class="login-form">
					<div class="jiaohao" @click="loginWjmm()">
						<Jiaohao></Jiaohao>
					</div>
					<el-form
						ref="ruleForm"
						:model="ruleForm"
						:rules="rules"
						class="demo-ruleForm"
						status-icon
					>
						<el-form-item prop="pass">
							<el-input
								v-model="ruleForm.pass"
								class="input01"
								placeholder="请输入用户名"
							>
								<template #prefix>
									<span class="iconfont icon-yonghu"></span>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="checkPass">
							<el-input
								v-model="ruleForm.checkPass"
								class="verification"
								placeholder="请输入短信验证码"
							>
								<template #prefix>
									<span class="iconfont icon-dunpai"></span>
								</template>
								<template #append>
									<div>获取验证码</div>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="age">
							<el-input
								v-model.number="ruleForm.age"
								placeholder="请输入6-18位,包含字母、数字的新密码"
								show-password
								type="password"
							>
								<template #prefix>
									<span class="iconfont icon-mima"></span>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="age">
							<el-input
								v-model="ruleForm.yesAge"
								placeholder="请确认新密码"
								show-password
								type="password"
							>
								<template #prefix>
									<span class="iconfont icon-mima"></span>
								</template>
							</el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<div class="remark">
			<span>沪ICP备XXX号-X 上海丰调节能技术有限公司</span>
		</div>
		<el-dialog
			v-model="briefDialogTableVisible"
			custom-class="briefDialog"
			title="系统简介"
			width="35%"
		>
			<div class="content">
				{{ synopsis }}
			</div>
			<template #footer>
				<span class="dialog-footer">
					<button @click="briefDialogTableVisible = false">
						我知道了
					</button>
					<button>下载详细资料</button>
				</span>
			</template>
		</el-dialog>

		<el-dialog
			v-model="explainDialogTableVisible"
			custom-class="briefDialog"
			title="使用说明"
			width="35%"
		>
			<div class="content">
				{{ instructions }}
			</div>
			<template #footer>
				<span class="dialog-footer">
					<button @click="explainDialogTableVisible = false">
						我知道了
					</button>
					<button>下载详细资料</button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import Jiaohao from "@/assets/icons/Jiaohao.vue";
import VerificationCode from "@/components/verifyCode.vue";

export default {
	components: {
		Jiaohao,
		VerificationCode,
	},
	data() {
		return {
			isWjmm: false,
			language: "中文",
			ruleForm: {
				user: "admin",
				password: "admin",
				age: "",
				yesAge: "",
			},
			config: {
				lang: this.$TOOL.data.get("APP_LANG") || this.$CONFIG.LANG,
			},
			briefDialogTableVisible: false,
			explainDialogTableVisible: false,
			identifyCode: "",
			dialogVisible: false,
			explainDialogVisible: false,
			instructions:
				"用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明。        使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明。        使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明。        使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明。        使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明。        使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明。        使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明使用说明。",
			synopsis:
				"介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简。        系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简。        系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介 。        系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简。。        系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简。        系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简。        系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简介系统简介系统简介简介简介简。 ",
		};
	},
	methods: {
		langHandleCommand(i) {
			this.config.lang = i;
			if (i === "zh-cn") {
				this.language = "中文";
			} else if (i === "en") {
				this.language = "英文";
			}
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					alert("submit!");
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		wjmm() {
			this.isWjmm = true;
		},
		xitongjianjie() {
			alert("111");
		},
		async login() {
			var validate = await this.$refs.ruleForm.validate().catch(() => {});
			if (!validate) {
				return false;
			}
			if (
				this.ruleForm.age.toLowerCase() !==
				this.identifyCode.toLowerCase()
			) {
				this.$message.error("验证码错误");
				return false;
			}
			this.islogin = true;
			var data = {
				username: this.ruleForm.user,
				password: this.$TOOL.crypto.MD5(this.ruleForm.password),
			};
			//获取token
			var user = await this.$API.auth.token.post(data);
			if (user.code == 200) {
				this.$TOOL.data.set("TOKEN", user.data.token);
				this.$TOOL.data.set("USER_INFO", user.data.userInfo);
			} else {
				this.islogin = false;
				this.$message.warning(user.message);
				return false;
			}

			this.$router.replace({
				path: "/projectGroup",
			});
			this.$message.success("Login Success 登录成功");
			this.islogin = false;
		},

		loginWjmm() {
			this.isWjmm = false;
		},
		resources(i) {
			switch (i) {
				case "jj":
					this.briefDialogTableVisible = true;
					break;
				case "sm":
					this.explainDialogTableVisible = true;
					break;
				case "jd":
					break;
				default:
					break;
			}
		},
	},
	watch: {
		"config.lang"(val) {
			this.$i18n.locale = val;
			this.$TOOL.data.set("APP_LANG", val);
		},
	},
};
</script>

<style lang="less" scoped>
.login-title {
	margin-left: 59px;
	margin-top: 40px;

	.title01 {
		font-family: SourceHanSansSC-light;
		font-size: 36px;
		color: #ffffff;
		font-weight: lighter;
	}

	.title02 {
		font-family: SourceHanSansSC-light;
		font-size: 18px;
		color: #ffffff;
		font-weight: lighter;
	}
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.right {
		padding-right: 30px;

		& > div {
			border: 1px solid #fff;
			padding: 3px 10px;
			margin-top: 5px;
			border-radius: 4px;

			div {
				color: #fff;
			}
		}
	}
}

.login_bg {
	width: 100%;
	height: 100%;
	background-image: url('/img/login-bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.login_main {
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%, -50%);

	.login-form {
		position: relative;
		padding: 55px;

		.password-css {
			:deep(.el-input__inner) {
				padding-right: 120px;
			}
		}

		.verification {
			:deep(.el-input-group__append) {
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #4d62a5;
			}

			:deep(.el-input__inner) {
				padding-right: 120px;
			}

			:deep(.el-input__prefix) {
				span {
					font-size: 24px !important;
				}
			}
		}

		.el-input {
			position: relative;

			:deep(.el-input__prefix) {
				color: #7f7f7f !important;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20px 0 15px;
				border-right: 2px solid #b0b4b7;

				span {
					font-size: 22px;
				}
			}
		}

		:deep(.el-input-group__append) {
			background: transparent;
			position: absolute;
			right: 0;
			z-index: 99999;
			top: 0;
			border-left: 2px solid #b0b4b7;
			height: 100%;
			width: 107px;

			.el-checkbox {
				width: 100%;
				height: 100%;
				justify-content: center;
			}
		}

		:deep(.el-input__inner) {
			width: 480px;
			height: 50px;
			background-color: #e0e9f2;
			border: 1px solid #5fafd7;
			padding-left: 80px;
		}

		.wjmima {
			color: #7f7f7f;
			text-align: right;
			font-size: 14px;
		}
	}

	.jiaohao {
		width: 45px;
		height: 45px;
		border-radius: 50px;
		background-color: #c1d3e4;
		position: absolute;
		font-size: 20px;
		transform: rotate(270deg);
		display: flex;
		align-items: center;
		justify-content: center;
		right: -10px;
		z-index: 99999;
		top: 38%;
	}
}

.login-css-title {
	display: flex;
	position: absolute;
	left: 28%;
	top: 16%;

	.maxOAO {
		font-family: SourceHanSansSC-bold;
		font-weight: normal;
		color: #ffffff;
		font-size: 160px;
		padding-right: 10px;
	}

	.login-title-01 {
		font-family: SourceHanSansSC-bold;
		font-weight: normal;
		color: #ffffff;
		font-size: 40px;
	}

	.login-title-02 {
		position: relative;
		font-family: SourceHanSansSC-bold;
		font-weight: normal;
		color: #ffffff;
		font-size: 20px;
		//font-size: 24px;
	}

	.title-top {
		margin-top: 95px;
		//margin-top: 120px;
		margin-left: 30px;
	}
}

.remark {
	color: #595858;
	position: absolute;
	//bottom:30px;
	bottom: 30px;
	left: 50%;
	transform: translate(-50%);
}

:deep(.briefDialog) {
	border-radius: 20px;

	.el-dialog__header {
		text-align: center;
		color: #7f7f7f;

		span {
			font-weight: normal;
		}

		button {
			i {
				font-size: 20px;
				color: #4d62a5;
			}
		}
	}

	.el-dialog__body {
		padding: 10px 20px;
		color: #7f7f7f;

		.content {
			height: 250px;
			width: 100%;
			overflow-y: scroll;
			padding-right: 10px;
		}

		.content::-webkit-scrollbar {
			width: 3px;
			height: 1px;
			background: #eee;
		}

		.content::-webkit-scrollbar-thumb {
			background: #4d62a5;
			border-radius: 5px;
			box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
		}

		.content::-webkit-scrollbar-track {
			box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
			border-radius: 10px;
			background: #ededed;
		}
	}

	.el-dialog__footer {
		text-align: center;
		padding: 25px 0;

		button {
			width: 120px;
			color: #fff;
			background: #8faadc;
			border: 1px solid #8faadc;
			padding: 5px 10px;
			border-radius: 4px;
			margin:0 30px;
		}
		button:nth-child(2){
			background:transparent;
			color:#8faadc;
		}
	}
}
</style>

<style lang="less">
.langPopover {
	background: rgba(172, 196, 219, 0.5) !important;
	border-radius: 6px;
	border: none;
	width: 76px !important;
	//left: 1336.33px !important;
	top: 56.3333px !important;
	left: auto !important;
	right: 29px;
}

.languageDropdown {
	background: rgba(172, 196, 219, 0.5);

	div {
		color: #fff;
		padding: 0 5px;
		margin: 0 3px;

		&:hover {
			background: #4d62a5 !important;
			color: #fff !important;
			border-radius: 6px;
		}
	}
}

.resourcesPopover {
	background: rgba(172, 196, 219, 0.5) !important;
	border-radius: 6px;
	border: none;
	width: 113px !important;
	//left: 1298.33px !important;
	top: 84.3333px !important;
	left: auto !important;
	right: 29px;
}

.resourcesDropdown {
	background: rgba(172, 196, 219, 0.5);

	div {
		color: #fff;
		font-size: 12px;
		padding: 0 5px;
		margin: 0 3px;

		&:hover {
			background: #4d62a5 !important;
			color: #fff !important;
			border-radius: 6px;
		}
	}
}

:deep(.el-dialog) {
	border-radius: 30px;
}
</style>
